<script setup>
import { useI18n } from "vue-i18n";
import { defineProps, inject, ref } from "vue";
const { t } = useI18n();
const props = defineProps({
  cartList: {
    type: Array,
    default: [],
  },
  cartHeight: {
    type: Number,
    default: 0,
  },
  del_goods: {
    type: Function,
  },
  fetchChangeCart: {
    type: Function,
  },
});
</script>
<template>
  <div :style="{ height: cartHeight + 'px' }">
    <div v-if="cartList.length" class="overflow-y-auto">
      <div
        class="pr-5 pl-5 hover:bg-cyan-50"
        v-for="(item, index) in cartList"
        :key="index"
      >
        <div class="flex pt-4 pb-4">
          <div class="w-1/5 overflow-hidden">
            <img alt="" :src="item.cart[0].productInfo.image" />
          </div>
          <div class="w-4/5 flex-col justify-between pl-2">
            <div class="h-1/3 flex flex-none justify-between">
              <div class="pr-2 overflow-hidden text-ellipsis whitespace-nowrap">
                {{ item.cart[0].productInfo.store_info }}
              </div>
              <a-popconfirm
                :content="t('deleteCartConfirm')"
                type="warning"
                @ok="del_goods(item.cart[0])"
                :okText="t('yes')"
                :cancelText="t('no')"
              >
                <span
                  class="flex whitespace-nowrap cursor-pointer text-blue-300 hover:text-blue-600"
                >
                  <icon-close size="13" />
                </span>
              </a-popconfirm>
            </div>
            <div
              class="h-1/3 w-1/3 cursor-pointer lex-grow flex items-center text-gray-400 text-xs"
              @click="modalsState.showGoodsAttrsModal = true"
            >
              {{ item.cart[0].productInfo.attrInfo.suk }}
              <icon-down />
            </div>
            <div class="h-1/3 flex-none flex place-items-end justify-between">
              <span class="text-rose-600">
                <span class="text-xs">{{ t("price") }}</span>
                <b class="text-base">{{ item.cart[0].productInfo.price }}</b>
              </span>
              <div class="flex items-center justify-center cart-item">
                <a-input-number
                  v-model="item.cart[0].cart_num"
                  @change="fetchChangeCart(item.cart[0])"
                  size="mini"
                  mode="button"
                  :min="1"
                  class="bg-white text-center"
                  style="width: 80px; border-radius: 14px"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="w-full h-3/4 flex items-center"
      v-else
    >
      <div class="w-3/5 m-auto text-center">
        <img alt="" src="../../../assets/images/no-cart.png" />
        <span class="text-gray-400 text-xs">{{ t("noItems") }}</span>
      </div>
    </div>
  </div>
</template>
